<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" th:href="@{/css/pintuer.css}">
<link rel="stylesheet" th:href="@{/css/admin.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<style>
			.cz a{
				border-radius:3px; border:1px solid #dfdfdf;display:inline-block; padding:5px 12px;
			}
			.cz a:hover{background:#09F; color:#FFF; border-color:#09F; }
</style>
</head>
<body>
<div class="panel admin-panel">
  <div class="panel-head"><strong class="icon-reorder"> 文章列表</strong></div>
  <div class="padding border-bottom">
      <!--<input type="text" name="title" style="width: 10%" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      <button style="margin-left: 10px" type="button" class="button border-yellow" onclick="window.location.href='#add'"><span class="icon-plus-square-o"></span> 查询</button>-->
      <div class="layui-form-item layui-inline">
          <label class="layui-btn layui-form-label" style="text-align: center" th:onclick="query()">查询</label>
          <div class="layui-input-block">
              <input class="layui-input" id="title" name="title" placeholder="输入文件名" autocomplete="off"/>
          </div>
      </div>
  </div>
  
  <table id="coursetable" class="table table-hover text-center">
  	<tr>
  		<th width="20%">文章名</th>
  		<th width="10%">分组</th>
  		<th width="20%">标签</th>
  		<th width="15%">创建时间</th>
  		<th width="5%">浏览量</th>
  		<th width="5%">点赞量</th>
  		<th width="5%">评论量</th>
		<th width="5%">TOP</th>
  		<th width="15%">操作</th>
  	</tr>
	  <tbody>
		<tr th:each="article:${articles.getRecords()}">
			<td th:text="${article.getTitle()}" >springboot入门</td>
			<td th:text="${article.getGname()}" >java框架</td>
			<td  >
				<button  class="layui-bg-orange layui-btn layui-btn-xs" th:each="tag : ${#strings.arraySplit(article.getTags(),';')}" th:text="${tag}"></button>
			</td>
			<td th:text="${#dates.format(article.getCreateTime(),'yyyy-MM-dd HH:mm:ss')}" width="8%">2021-04-21 21:53:00</td>
			<td ><span th:text="${article.getHits()}"></span></td>
			<td ><span th:text="${article.getZan()}"></span></td>
			<td ><span th:text="${article.getCommentsNum()}"></span></td>
			<td width="2%">
				<form id="form"  class="layui-form">
					<!--<input id="id" name="id" type="hidden" th:value="${article.getArticleId()}">-->
					<input id="top" name="top" type="checkbox" lay-skin="switch" lay-filter="switchTest" th:value="${article.getArticleId()}+'-'+${article.getTop()}" lay-text="ON|OFF" th:checked="${article.getTop()=='1'}">
				</form>
			</td>
			<td class="cz" >
				<a th:href="@{/article/edit_article}+'?id='+${article.getArticleId()}">编辑</a>
				<a target="_blank" th:href="@{/show/content/}+${article.getArticleId()}">浏览</a>
				<a th:href="@{/article/delArticle/}+${article.getArticleId()}">删除</a>
			</td>
		</tr>
		<tr>
			<td colspan="9">
				<div class="pagelist">
					<a id='first_page'  th:onclick="page(4)">首页</a>
					<a id='last_page'   th:onclick="page(1)">上一页</a>
					<a id='next_page'   th:onclick="page(2)">下一页</a>
					<a id='end_page'    th:onclick="page(5)">尾页</a>
					<a id='jump_page'   th:onclick="page(3)">跳转</a>
					<input id="page_no" style="height: 20px;width:30px" th:value="${articles.getCurrent()}"/>
					<span th:text="'共'+${articles.getTotal()}+'条分'+${articles.getPages()}+'页'"></span>
					<input id="size"  style="height: 20px;width:30px" th:value="${articles.getSize()}"/>
					<a id=''   th:onclick="page(0)">设置</a>
				</div>
			</td>
		</tr>
	  </tbody>
 </table>

</div>

</body>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script th:src="@{/js/pintuer.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="javascript">
	function page(x) {
		var  page=[[${articles.getCurrent()}]];
		var end_page=[[${articles.getPages()}]];
		var downPage = page+1;
		var topPage = page-1;
		var page_no=$("#page_no").val();
		var size=$("#size").val();
		if (x==3&&page_no>=1&&page_no<=end_page){

			window.location.href="/article/data_article?pageNum="+page_no+"&size="+size;
		}
		if (x==0){
			window.location.href="/article/data_article?size="+size;
		}
		if (x==1&&page>1){

			window.location.href="/article/data_article?pageNum="+topPage+"&size="+size;
		}
		if (x==2&&page<end_page){

			window.location.href="/article/data_article?pageNum="+downPage+"&size="+size;
		}
		if (x==4){
			window.location.href="/article/data_article?size="+size;
		}
		if (x==5){
			window.location.href="/article/data_article?pageNum="+end_page+"&size="+size;
		}
	}
	function query() {
		var title=$("#title").val();
		var size=$("#size").val();
		window.location.href="/article/data_article?title="+title+"&size="+size;
	}
	layui.use('form', function(){
		var form = layui.form;
		form.on('switch(switchTest)', function(data){


			var str=this.value;
			var arr=new Array();
			arr=str.split('-');
			/*for(var i=0;i<arr.length;i++)
			{
				alert(arr[i]);
			}*/
			//window.location.href="/article/toparticle/"+arr[0]+"/"+arr[1];
			//layer.tips('温馨提示：不要频繁修改', data.othis)
			$.ajax({
				type:'post',
				url:"/article/toparticle/"+arr[0]+"/"+arr[1],
				dataType: "text",
				async: false,
				success:function (data) {
					if (data==1){
						layer.msg('文章以：'+ (this.checked ? '置顶' : '取消置顶'), {
							offset: '6px'
						});
					}else {
						layer.tips('温馨提示：不要频繁修改', data.othis)
					}
				}
			});
		});
	});

</script>
</html>